<template>
  <div style="position: relative;">
    <div class="home-top" ref="top">
      <mt-header title="我的搭档"><mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button></mt-header>
      <mt-search style="height: 52px;" v-model="search" @keyup.enter.native="getFilter()"></mt-search>
    </div>
    <div ref="block"></div>
    <div style="overflow:auto;" v-show="!loading" ref="wrapper">
      <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottomDistance="10" :topDistance="50" :autoFill="false" :bottomAllLoaded="!hasMore" ref="loadmore">
        <ul class="member-list">
          <li v-for="(item, index) in list">
            <div @click="$router.push('/member/' + item.id)" class="member-list-c">
              <div class="member-list-l"><img src="@/assets/img/head/male-1.png"  ></div>
              <div class="member-list-r">
                <h3>{{item.name}}</h3>
                <p class="gray6">等级：{{item.grade}}</p>
                <p class="gray6">排名：{{item.rank}}</p>
                <p class="gray6">积分：{{item.score}}</p>
              </div>
            </div>
            <div class="mr10">
              <mt-button type="primary" plain size="small" @click="addMember(index)" style="padding: 0 7px">删除</mt-button>
            </div>
          </li>
        </ul>
      </mt-loadmore>
      <div class="no-more" v-show="!hasMore">没有更多…</div> 
    </div>
    <div v-show="loading" class="loading-center" ref="loadBox"><mt-spinner :type="3" color="#999" :size="20"></mt-spinner>加载中…</div>
  </div>
</template>

<script>
export default { 
  data () {
    return {
      search:'',
      list:[],
      page:1,
      loading:false,
      hasMore:false
    }
  },
  mounted: function (){
    var t_h = this.$refs.top.offsetHeight;
    this.$refs.block.style.height = t_h + "px";
    this.$refs.wrapper.style.height = document.documentElement.clientHeight - t_h + "px"; 
    this.$refs.loadBox.style.height = document.documentElement.clientHeight - t_h + "px"; 
    this.getFilter();
  },
  methods:{
    getList(type){
      if(!type) this.page = 1;
      setTimeout(()=>{
        this.axios.get(this._site + 'member/list', {
          params: { page: this.page, search:this.search }          
        }).then(response => {
          //设置拉拽加载结束
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();          
          var res = response.data;
          this.loading = false;
          if(res.status == 1){
            if(!type) this.list = [];
            this.list = this.list.concat(res.data);
            if(this.list.length > 30){
              this.hasMore = false;
            }else{
              this.page++;
            }
          }else{
            this.$toast({message: '加载失败'});
          }
        }).catch(error => {
          //设置拉拽加载结束
          this.$refs.loadmore.onTopLoaded();
          this.$refs.loadmore.onBottomLoaded();
          this.$toast({message: '加载失败'});
        });
      },500)
    },
    getFilter(){
      this.page = 1;
      this.loading = true;
      this.loadTop();
      this.$refs.wrapper.scrollTop = 0;
    },    
    loadTop(){
      this.hasMore = true;
      this.getList();
    },
    loadBottom(){
      this.getList(true);
    },
    addMember(id){
      this.$messagebox.confirm('<i style="color:#000;">您确定删除该搭档吗？</i>',null).then(action => {
        if(action == 'confirm'){
          this.$toast('删除搭档成功！');
        }
      });
    }
  }
}
</script>
